<template>
    <fieldset>
        <legend>{{ name }}</legend>
        <ul>
            <li v-for="item in cartData" :key="item.id">
                <b>
                    商品：{{ item.title }}
                </b>
                ———————
                <b>
                    价格：{{ item.price }}
                </b>
                ———————
                <b>
                    数量：{{ item.count }}
                </b>
                <button @click="removeCart(item)">减少</button>
            </li>
        </ul>
        <h1>商品总价为：{{ total }}元</h1>
    </fieldset>
</template>

<script>
import { mapState,  mapGetters, mapActions } from 'vuex';
// mapState     （'模块名称',['属性名']）
export default {
    computed: {
        ...mapState('cart', ['name', 'cartData']),
        ...mapGetters('cart', ['total']),
        // ...mapState('product', ['productData']) 
    },
    methods: {
        ...mapActions('cart', ['REMOVE_CART']),
        removeCart(item) {
            this.REMOVE_CART(item)
        },
        // ...mapMutations('cart', ['LOG'])
    },
    mounted() {
        // this.LOG()
    }

}

</script>